<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频管理</title>
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
    <link rel="stylesheet" type="text/css" th:href="@{/js/ckplayer/css/ckplayer.css}">
    <script type="text/javascript" charset="utf-8" th:src="@{/js/ckplayer/js/ckplayer.js}"></script>
    <script>
        let player = null
    </script>
</head>
<div th:replace="fragment/script::contextPath"></div>
<body>
<div th:replace="fragment/nav::nav"></div>
<div class="container" style="width: auto">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#user" role="tab" aria-controls="home" aria-selected="true">用户</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#media" role="tab" aria-controls="profile" aria-selected="false">媒体</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="user" role="tabpanel" aria-labelledby="home-tab">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col" style="text-align: center">举报人</th>
                    <th scope="col" style="text-align: center">被举报人</th>
                    <th scope="col" style="text-align: center">举报原因</th>
                    <th scope="col" style="text-align: center">举报时间</th>
                    <th scope="col" style="text-align: center">举报状态</th>
                    <th scope="col" style="text-align: center">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr style="text-align: center" th:each="report:${reportedList}">
                    <td th:text="${report.userName}"></td>
                    <td th:text="${report.reportedName}"></td>
                    <td th:text="${report.reportCause}"></td>
                    <td th:text="${#dates.format(report.reportTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td th:switch="${report.reportStatus}">
                        <span th:case="0">举报成功</span>
                        <span th:case="1">正在审核</span>
                        <span th:case="2">举报失败</span>
                    </td>
                    <td th:if="${report.reportStatus!=0}">
                        <button type="button" class="btn btn-outline-info" th:onclick="userConfirm([[${report.reportId}]])">通过</button>
                        <button type="button" class="btn btn-outline-info" th:onclick="userRefuse([[${report.reportId}]])">拒绝</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="tab-pane fade" id="media" role="tabpanel" aria-labelledby="profile-tab">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col" style="text-align: center" width="90px">举报人</th>
                    <th scope="col" style="text-align: center" width="250px">被举报视频</th>
                    <th scope="col" style="text-align: center">视频内容</th>
                    <th scope="col" style="text-align: center" width="90px">视频类型</th>
                    <th scope="col" style="text-align: center" width="150px">举报原因</th>
                    <th scope="col" style="text-align: center">举报时间</th>
                    <th scope="col" style="text-align: center">举报状态</th>
                    <th scope="col" style="text-align: center" width="150px">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr style="text-align: center" th:each="report:${reportMediaList}">
                    <td th:text="${report.userName}"></td>
                    <td th:text="${report.mediaName}"></td>
                    <td>
                        <button type="button" class="btn btn-outline-info" th:onclick="previewMedia([[${report.mediaId}]],[[${report.mediaName}]],[[${report.mediaCover}]],[[${report.mediaIntro}]],[[${report.mediaDownload}]])">详情</button>
                    </td>
                    <td th:switch="${report.reportType}">
                        <span th:case="0">视频</span>
                        <span th:case="1">影视</span>
                    </td>
                    <td th:text="${report.reportCause}"></td>
                    <td th:text="${#dates.format(report.reportTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td th:switch="${report.reportStatus}">
                        <span th:case="0">举报成功</span>
                        <span th:case="1">正在审核</span>
                        <span th:case="2">举报失败</span>
                    </td>
                    <td th:if="${report.reportStatus!=0}">
                        <button type="button" class="btn btn-outline-info" th:onclick="mediaConfirm([[${report.reportId}]])">通过</button>
                        <button type="button" class="btn btn-outline-info" th:onclick="mediaRefuse([[${report.reportId}]])">拒绝</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="mediaModal" tabindex="-1" aria-labelledby="mediaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mediaName"></h5>
                <button type="button" class="close" onclick="closeVideo()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input id="mediaId" type="hidden">
                <p id="mediaIntro"></p>
                <div id="mediaDownload" style="width: 463px;height: 289px"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    function userConfirm(reportId){
        $.post(contextPath+"/admin/adminProcessReport",
            {reportId:reportId,reportStatus:0},
            function () {
            alert("操作成功");
            window.location.reload()
        })
    }
    function userRefuse(reportId){
        $.post(contextPath+"/admin/adminProcessReport",
            {reportId:reportId,reportStatus:2},
            function () {
                alert("操作成功");
                window.location.reload()
            })
    }
    function mediaConfirm(reportId){
        $.post(contextPath+"/admin/adminProcessReport",
            {reportId:reportId,reportStatus:0},
            function () {
                alert("操作成功");
                window.location.reload()
            })
    }
    function mediaRefuse(reportId){
        $.post(contextPath+"/admin/adminProcessReport",
            {reportId:reportId,reportStatus:2},
            function () {
                alert("操作成功");
                window.location.reload()
            })
    }
    function previewMedia(mediaId,mediaName,mediaCover,mediaIntro,mediaDownload){
        $("#mediaId").text(mediaId)
        $("#mediaName").text(mediaName)
        $("#mediaIntro").html(mediaIntro.replaceAll("\n","<br />"))
        /*$("#mediaCover").attr("src",contextPath+mediaCover).attr("alt",mediaName).css({
          "display":"block",'width':'100%','height':'auto'
      })*/
        //调用开始
        var videoObject = {
            container: '#mediaDownload', //视频容器
            poster:contextPath+mediaCover,//封面图片
            video:contextPath+'/image/高雨诺/2.mp4'//视频地址
        };
        player = new ckplayer(videoObject)//调用播放器
        /*    $("#mediaDownload").attr("src",/!*mediaDownload*!/'http://www.pi-ckplayer.com/video/1_1920x1080.mp4').css({
              "display":
              "none",'width':'100%','height':'auto'
          })*/
        player.play()
        $("#mediaModal").modal("show")
    }
    function closeVideo(){
        $("#mediaModal").modal("hide")
        player.pause()
    }
</script>